{extend name="public/base" /}

{block name="content"}
<style>
    .pagination{
        margin-top: 0;
        margin-bottom: 0;
    }
    .role-close{
        color: #000;
        margin-left: 5px;
        font-size: 14px;
    }
    .role-admin{
        display: none;}
</style>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="pull-left">
                        <a class="btn btn-sm btn-primary modal-create">添加</a>
                        <a class="btn btn-sm btn-danger deletes">删除</a>
                    </div>
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th width="8%">
                                <input type="checkbox" id="all" class="i-checks total-checkbox"> <label for="all">全选</label>
                            </th>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>所属角色</th>
                            <th>账号</th>
                            <th>状态</th>
                            <th>添加时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {empty name='list'}
                        <tr align="center">
                            <td colspan="7">
                                暂时没有数据哦
                            </td>
                        </tr>
                        {else /}
                        {foreach $list as $k=>$item}
                        <tr id="del-{$item.id}">
                            <td>
                                <input name="ids[]" value="{$item.id}" type="checkbox" class="i-checks item-checkbox">
                            </td>
                            <td>
                                {$item.id}
                            </td>
                            <td>
                                <a> {$item.username}</a>
                            </td>
                            <td style="position: relative">
                                <button style="cursor: default" type="button" class="btn btn-xs">{$roleName[$adminRoleId[$item['id']]]}<a class="role-close"  title="点我修改">x</a></button>

                                <select style="width: 115px;" id="modify-role" class="form-control role-admin" >
                                    {foreach $role as $k=>$v}
                                    <option value="{$v.id}">{$v.name}</option>
                                    {/foreach}
                                </select>
                                <a type="button" style="position: absolute;top: 13px;right: 40px" class="role-admin btn btn-xs role-save" data-role="{$item['id']}">保存</a>
                                <a type="button" style="position: absolute;top: 13px;right: 10px" class="role-admin btn btn-xs cancel-btn">取消</a>
                            </td>
                            <td>{$item.email}</td>
                            <td>
                                <div class="switch">
                                    <div class="onoffswitch">
                                        <input data-status="{$item.status}" data-id="{$item.id}" type="checkbox" {$item.status == 0 ? '' : 'checked'}  class="admin-status onoffswitch-checkbox" id="example{$item.id}">
                                        <label class="onoffswitch-label" for="example{$item.id}">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </td>

                            <td>{$item.create_time}</td>
                            <td>
                                <a href="/admin/manager/{$item.id}" title="编辑" class="btn btn-outline btn-xs btn-info modal-item"><i class="fa fa-edit"></i></a>
                                <a href="/admin/manager/{$item.id}" data-id="{$item.id}" title="删除" class="btn btn-outline btn-xs btn-danger delete"><i class="fa fa-trash"></i></a>
                            </td>
                        </tr>
                        {/foreach}
                        {/empty}
                        </tbody>
                    </table>
                    {$list|raw}
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modal-form" class="modal fade" aria-hidden="true">
    <div class="modal-dialog" style="width:400px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加管理员</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal add-admin-form" role="form">
                    <div class="form-group" id="role">
                        <label for="" class="col-sm-4 control-label">所属角色<font color="red">*</font></label>
                        <div class="col-sm-8">
                            <select name="role_id" id="role-id" class="form-control">
                                {foreach $role as $k=>$v}
                                <option value="{$v.id}">{$v.name}</option>
                                {/foreach}
                            </select>
                            <span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-4 control-label">用户名 <font color="red">*</font></label>
                        <div class="col-sm-8">
                            <input type="text" autocomplete="off" class="menu-common form-control" id="name" name="username" placeholder="请输入用户名">
                            <span></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="email" class="col-sm-4 control-label">邮箱 <font color="red">*</font></label>
                        <div class="col-sm-8">
                            <input type="email" autocomplete="off" class="menu-common form-control" id="email" name="email" placeholder="邮箱作为登录账号">
                            <span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="passwd" class="col-sm-4 control-label">密码 <font color="red" class="font-common">*</font></label>
                        <div class="col-sm-8">
                            <input type="password" autocomplete="off" class="menu-common form-control" id="passwd" name="password" placeholder="6~12位">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="repaswd" class="col-sm-4 control-label">重复密码 <font color="red" class="font-common">*</font></label>
                        <div class="col-sm-8">
                            <input type="password" autocomplete="off" class="menu-common form-control" id="repaswd" name="password_confirm" placeholder="6~12位">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="pull-right" style="margin-right:8px;">
                            <button data-style="zoom-in" type="button" data-id="0" class="ladda-button btn btn-primary add-admin">保存</button>
                        </div>
                    </div>
                    <div class="alert alert-danger hide error-info "></div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    $(function(){
        $('.role-close').click(function(){
            $(this).parent('button').hide();
            $(this).parent('button').siblings('select.role-admin,a.role-admin').show();
//            $('.role-admin').show();
        });
        $('.cancel-btn').click(function(){
            $('.role-admin').hide();
            $(this).siblings('button').show();
        });
        $('.role-save').click(function(){
            let id = $(this).attr('data-role');
            let role_id = $('#modify-role').val();
            $.post('/admin/modify/role',{
                id: id,
                role_id: role_id
            },function(res){
                if(res.code==0){
                    alertMsg(res.msg,'error',false);
                }else{
                    alertMsg(res.msg)
                }
            },'json');
        });

        $('.admin-status').click(function(){
            var _this = $(this);
            let id = $(this).attr('data-id');
            let status = $(this).attr('data-status');
            $.get('/admin/adminstatus/'+id+'/'+status,{},function(res){
                if (res.code == 0){
                    alertMsg(res.msg,'error',false);
                    if (status == 1){
                        _this.attr('checked',true);
                    }else{
                        _this.attr('checked',false);
                    }
                }else{
                    alertMsg(res.msg,'success',false);
                }
            },'json');
        });

        delete_data('/admin/deleteadmin');

        delete_one();

        hide_model(['username','email','passwd','password_confirm']);

        // 显示错误/正确提示
        $('.menu-common').blur(function(){
            if ($(this).attr('placeholder') != '为空表示不修改'){
                if ($(this).val() == '') {
                    $(this).parent().parent().addClass('has-error');
                }else{
                    $(this).parent().parent().removeClass('has-error');
                }
            }
        });

        $('.add-admin').click(function(){
            var l;

            var id = $(this).attr('data-id');
            var params = $('.menu-common').length;
            for (var i = 0; i < params; i++) {
                if ($('.menu-common').eq(i).attr('placeholder') != '为空表示不修改'){
                    if ($('.menu-common').eq(i).val()=='') {
                        $('.menu-common').eq(i).parent().parent().addClass('has-error');
                        $('.menu-common').eq(i).focus();
                        var flag = false;
                        break;
                    }else{
                        $('.menu-common').eq(i).parent().parent().removeClass('has-error');
                        var flag = true;
                    }
                }
            }
            if (parseInt(id) !== 0) {
                // 修改
                var data = $('.add-admin-form').serialize();
                var post_url = '/admin/manager/'+id;
                var type = 'PUT';
            }else{
                // 新增
                var data = $('.add-admin-form,select').serialize();
                var post_url = '/admin/manager';
                var type = 'POST';
            }
            if (flag){
                l = Ladda.create(this);
                l.start();
                $.ajax({
                    url: post_url,
                    data: data,
                    type: type,
                    dataType: 'json',
                    success: function(res){
                        if (res.code == 0){
                            $('.error-info').removeClass('hide').text(res.msg);
                        }else{
                            $('#modal-form').modal('hide');
                            alertMsg(res.msg);
                        }
                        l.stop();
                    }
                });
            }
        });

        // 显示内容
        $('.modal-item').click(function(){
            $('#role').hide();
            $('.font-common').hide();
            $('input[name="password"]').attr('placeholder','为空表示不修改');
            $('input[name="password_confirm"]').attr('placeholder','为空表示不修改');
            var url = $(this).attr('href');
            if ($(this).hasClass('modal-create')) {
                var title = '添加管理员';
            }else{
                var title = '编辑管理员';
            }
            $.get(url,{},function(res){
                if(res.code==1){
                    showModal('modal-form',res.data,title,'add-admin');
                }else{
                    alertMsg(res.msg,'warning',false);
                }
            },'json');
            return false;
        });

        $('.modal-create').click(function(){
            $('#modal-form').modal('show').find('.modal-title').text('添加管理员');
            $('.font-common').show()
            $('input[name="password"]').attr('placeholder','6~12位');
            $('input[name="password_confirm"]').attr('placeholder','6~12位');
            $('.add-admin').attr('data-id',0);
        });
    });
</script>
{/block}